<template>
  <el-menu
    :style="{ width: !isCollapse ? '230px' : '64px' }"
    active-text-color="#ffd04b"
    background-color="#545c64"
    class="el-menu-vertical-demo asideContent"
    :default-active="active"
    text-color="#fff"
    @open="handleOpen"
    @close="handleClose"
    :collapse="isCollapse"
    
  >
    <p class="logoLg">{{ isCollapse ? "陪诊" : "陪诊系统" }}</p>
    <TreeMenu :metaData="metaData" :index="1"></TreeMenu>
  </el-menu>
</template>

<script setup>
import { useRouter } from "vue-router";
import TreeMenu from "./TreeMenu.vue";
import { computed, ref } from "vue";
import useMenuStore from "@/stores/Menu";
import UseuserPermission from "@/stores/UserPermission";
const router = useRouter();
console.log(router);
const permissionStore = UseuserPermission();
const metaData = computed(() =>permissionStore.routerList);
console.log(metaData.value);
const active=computed(()=>MenuStore.menuActive)
// metaData.value = router.options.routes[0].children;
// console.log(metaData.value);
const MenuStore = useMenuStore();
const isCollapse = computed(() => MenuStore.isCallapse);
const handleOpen = () => {};
const handleClose = () => {};
</script>
<style scoped lang="scss">
.asideContent {
  height: 100%;
  transition: all linear;
  .logoLg {
    font-size: 20px;
    text-align: center;
    height: 50px;
    line-height: 50px;
    color: #fff;
  }
}
</style>
